<script setup lang="ts">
  import { useLocale } from '@/locales/useLocale';
  import { IDescImageProps } from '@/components/types';
  import { useMobile } from '@/hooks/core/useMobile';
  const { t } = useLocale();
  const props = withDefaults(
    defineProps<{
      option: IDescImageProps;
    }>(),
    {
      option: () => ({
        src: '',
        desc: '',
        isRight: true,
      }),
    }
  );
  const isMobile = useMobile();
</script>

<template>
  <div class="container mx-auto px-4 md:px-6 lg:px-8 xl:px-48">
    <el-row justify="space-around" align="middle">
      <el-col :md="6" v-if="option.isRight || isMobile">
        <img :src="option.src" alt="plague" class="mx-auto wow animate__animated animate__bounceInUp" ref="img" />
      </el-col>
      <el-col :md="16" class="mt-4 md:mt-8 lg:mt-0">
        <p class="indent-8 wow animate__animated animate__bounceInUp" ref="text">
          {{ t(option.desc) }}
        </p>
      </el-col>
      <el-col :md="6" v-if="!option.isRight && !isMobile">
        <img :src="option.src" alt="plague" class="mx-auto wow animate__animated animate__bounceInUp" ref="img" />
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss"></style>
